<meta charset="<?= getMessageByKey("default.charset") ?>">

<script>
  function submitDelete() {
    $('#action').val('delete');
    $('#imgform').submit();
  }

  function submitChange() {
    $('#action').val('change');
    $('#imgform').submit();
  }

</script>

<div class="maincommon">

  <?php
  include_once("profile_menu.php");
  ?>
  <div class="profilesectionheader">
    <?= getMessageByKey("user.profile.img.header") ?>
  </div>

  <img class="profileimage"
       src="<?= \controller\Config::getPropertyByKey('directory.view.user.image') . getAvatarSrc($id) ?>">

  <?php
  if (!$guest) {
    ?>
    <form enctype="multipart/form-data" method="post" action="?action=profimghand" id="imgform">

      <input type="hidden" name="MAX_FILE_SIZE" value="25000000"/>

      <div class="profileimagebuttonsdiv">
        <div class="fileselect">
          <input name="image" onchange="submitChange()" type="file" accept=".jpg, .png, .jpeg, .gif" id="realfileinput"
                 onmouseover="$('#fakefileinput').css('background-color', 'rgb(73, 67, 255)')"
                 onmouseout="$('#fakefileinput').css('background-color', 'rgba(0,0,0,1)')"/>

          <div class="button" id="fakefileinput">
            <?= getMessageByKey("button.user.profile.img.new") ?>
          </div>
        </div>
        <div class="button" onclick="submitDelete()">
          <?= getMessageByKey("button.user.profile.img.del") ?>
        </div>
      </div>


      <input type="hidden" name="action" id="action">
    </form>
  <?php
  }
  ?>
</div>